<script>
import { onMounted, ref, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import { getAirData } from '@/api/sensor';

export default {
  name: 'LeftCenter',
  setup() {
    const gaugeChart = ref(null);
    const gaugeChart2 = ref(null);
    let myChart = null;
    let myChart2 = null;

    // 获取空气温湿度数据
    const fetchAirData = async () => {
      try {
        const airData = await getAirData();
        console.log('Air data:', airData);

        // 更新温度图表
        if (myChart) {
          const tempValue = (airData.temperature / 10).toFixed(1);
          myChart.setOption({
            series: [
              {
                data: [{ value: tempValue }]
              },
              {
                data: [{ value: tempValue }]
              }
            ]
          });
        }

        // 更新湿度图表
        if (myChart2) {
          const humValue = (airData.humidity / 10).toFixed(1);
          myChart2.setOption({
            series: [
              {
                data: [{ value: humValue }]
              },
              {
                data: [{ value: humValue }]
              }
            ]
          });
        }
      } catch (error) {
        console.error('获取空气数据失败:', error);
      }
    };

    onMounted(() => {
      // 温度仪表盘配置
      const tempOption = {
        series: [
          {
            type: 'gauge',
            center: ['50%', '60%'],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 100,
            splitNumber: 10,
            itemStyle: {
              color: '#00ffd9'
            },
            progress: {
              show: true,
              width: 14
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 14,
                color: [[1, 'rgba(0, 255, 217, 0.1)']]
              }
            },
            axisTick: {
              distance: -22,
              splitNumber: 5,
              lineStyle: {
                width: 1,
                color: '#00ffd9'
              }
            },
            splitLine: {
              distance: -26,
              length: 7,
              lineStyle: {
                width: 1,
                color: '#00ffd9'
              }
            },
            axisLabel: {
              distance: -12,
              color: '#00ffd9',
              fontSize: 11
            },
            detail: {
              valueAnimation: true,
              width: '60%',
              lineHeight: 20,
              borderRadius: 4,
              offsetCenter: [0, '-15%'],
              fontSize: 24,
              fontWeight: 'bolder',
              formatter: '{value} °C',
              color: '#00ffd9'
            },
            data: [{ value: 0 }]
          },
          {
            type: 'gauge',
            center: ['50%', '60%'],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 100,
            itemStyle: {
              color: '#00ffd9'
            },
            progress: {
              show: true,
              width: 4
            },
            pointer: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            },
            data: [{ value: 0 }]
          }
        ]
      };

      // 湿度仪表盘配置
      const humOption = {
        series: [
          {
            ...tempOption.series[0],
            itemStyle: {
              color: '#FF6B6B'
            },
            axisLine: {
              lineStyle: {
                width: 20,
                color: [[1, 'rgba(255, 107, 107, 0.1)']]
              }
            },
            axisTick: {
              ...tempOption.series[0].axisTick,
              lineStyle: {
                width: 1,
                color: '#FF6B6B'
              }
            },
            splitLine: {
              ...tempOption.series[0].splitLine,
              lineStyle: {
                width: 2,
                color: '#FF6B6B'
              }
            },
            axisLabel: {
              ...tempOption.series[0].axisLabel,
              color: '#FF6B6B'
            },
            detail: {
              ...tempOption.series[0].detail,
              formatter: '{value} %RH',
              color: '#FF6B6B'
            }
          },
          {
            ...tempOption.series[1],
            itemStyle: {
              color: '#FF6B6B'
            }
          }
        ]
      };

      // 初始化图表
      const chartDom = gaugeChart.value;
      myChart = echarts.init(chartDom);
      myChart.setOption(tempOption);

      const chartDom2 = gaugeChart2.value;
      myChart2 = echarts.init(chartDom2);
      myChart2.setOption(humOption);

      // 初始获取数据
      fetchAirData();
      // 每分钟更新一次数据
      const timer = setInterval(fetchAirData, 60000);

      // 组件卸载时清除定时器
      onBeforeUnmount(() => {
        clearInterval(timer);
        myChart.dispose();
        myChart2.dispose();
      });
    });

    return {
      gaugeChart,
      gaugeChart2
    };
  }
};
</script>

<template>
  <div class="left-center">
    <dv-border-box-9 :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
      <div class="content-wrapper">
        <div class="header">
          <div class="title-container">
            <dv-decoration3 class="decoration-left" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']" />
            <dv-border-box-2 class="title-box" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
              <div class="title">智慧大棚实时环境监测</div>
            </dv-border-box-2>
            <dv-decoration3 class="decoration-right" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']" />
          </div>
        </div>
        <div class="data-row">
          <dv-border-box10 class="data-box" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
            <div ref="gaugeChart" class="gauge"></div>
            <dv-border-box-8 class="temperature-box" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
              <div class="temperature-label">空气温度</div>
            </dv-border-box-8>
          </dv-border-box10>

          <dv-border-box10 class="data-box" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
            <div ref="gaugeChart2" class="gauge"></div>
            <dv-border-box-8 class="temperature-box" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
              <div class="temperature-label">空气湿度</div>
            </dv-border-box-8>
          </dv-border-box10>
        </div>
      </div>
    </dv-border-box-9>
  </div>
</template>

<style scoped>
.left-center {
  width: 100%;
  height: 100%;
  padding: 6px;
}

.content-wrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 28, 36, 0.5);
  padding: 10px;
  border-radius: 4px;
}

.header {
  margin-bottom: 0;
  width: 100%;
}

.title-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-box {
  width: fit-content;
  height: 40px;
  padding: 0 30px;
}

.data-row {
  display: flex;
  justify-content: center;
  gap: 0;
}

.data-box {
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 240px;
  padding: 5px;
  text-align: center;
  position: relative;
}

.gauge {
  width: 82%;
  height: 82%;
  margin: auto;
  margin-bottom: -15px;
}

.temperature-box {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: fit-content;
  padding: 4px 8px;
}

.temperature-label {
  color: #00ffd9;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(0, 255, 217, 0.3);
}

.title {
  color: #00ffd9;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
  padding: 0 10px;
  line-height: 40px;
  text-shadow: 0 0 10px rgba(0, 255, 217, 0.3);
}

.decoration-left,
.decoration-right {
  width: 100px;
  height: 20px;
}
</style>